<template>
  <LayoutView :select-index="100">
    <div class="book" style="width: 960px;margin: 0 auto">
      <div class="book-info">
        <div class="banner" slot="banner" v-if="book.imageList.length>0">
          <el-carousel height="450px" trigger="click">
            <el-carousel-item v-for="item in book.imageList" :key="item.id">
              <el-image :src="baseImageUrl + item.src" style="height: 100%;width: 100%" fit="fill"/>
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-row style="margin-top: 15px">
          <el-col :span="12">
            <h2 :title="book.bookName" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              <a href="javascript:;" style="color: black;text-decoration: none;">{{book.bookName}}</a>
            </h2>
          </el-col>
          <el-col :span="1" :offset="10">
            <i @click="like" style="font-size: 22px;cursor: pointer" :class="isLike?'el-icon-star-on':'el-icon-star-off'" :title="isLike?'点击取消收藏':'点击收藏图书'"></i>
          </el-col>
          <el-col :span="1">
            <i style="font-size: 22px;cursor: pointer"  class="el-icon-reading" @click="read()" title="点击阅读图书"></i>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="12">
            <div style="display: flex">
              <span>作者:</span>
              <h4>{{book.authorName}}</h4>
            </div>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-tag v-if="book.bookStatus === 1" type="warning">连载中</el-tag>
            <el-tag v-else type="success">已完结</el-tag>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="20" :offset="2">
            <el-tag v-for="category in book.categoryList" :key="category.categoryId" size="medium" style="margin: 0 5px 3px 0" v-text="category.categoryName"></el-tag>
          </el-col>
        </el-row>
      </div>
      <div class="book-profile">
        <el-divider content-position="center">图书简介</el-divider>
        <p>{{book.profile}}</p>
      </div>
      <div class="book-catalog">
        <el-divider content-position="center">图书目录</el-divider>
        <el-row :gutter="20">
          <el-col style="margin-bottom: 20px;cursor: pointer;" :span="8" v-for="(item,index) in catalogList" :key="item.id" @click.native="read(item.id)">
            <el-card shadow="always">
              <p :title="item.catalogName" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis"><span>{{index+1}}.</span>{{item.catalogName}}</p>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="book-comment">
        <el-divider content-position="center">图书评论</el-divider>
        <el-row style="margin-bottom: 15px" type="flex" align="middle">
          <el-col :span="2">评论({{book.commentList.length}})</el-col>
          <el-col :span="2">
            <el-button type="text" @click="showCommentDialog = true">发表评论<i class="el-icon-arrow-right"></i></el-button>
          </el-col>
        </el-row>
        <div class="comment-list">
          <CommentList :book-id="book.bookId" :limit="3" ref="commentList"/>
        </div>
      </div>
    </div>
    <el-dialog title="发表评论" :visible.sync="showCommentDialog" v-if="showCommentDialog">
      <el-form :model="comment" :rules="rules" ref="commentForm">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="评分">
            <el-form-item>
              <el-rate show-text v-model="comment.score"/>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="内容">
            <el-form-item prop="content">
              <el-input v-model="comment.content" type="textarea" :rows="3" maxlength="200" show-word-limit/>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="saveComment">提交</el-button>
        <el-button type="warning" @click="showCommentDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </LayoutView>
</template>

<script>
import LayoutView from '@/views/front/components/LayoutView.vue'
import CommentList from '@/views/front/components/CommentList.vue'
export default {
  name: 'BookDetail',
  components: { LayoutView, CommentList },
  data () {
    return {
      book: {},
      baseImageUrl: process.env.VUE_APP_BASE_URL + '/img/',
      isLike: false,
      catalogList: [],
      loginInfo: {},
      comment: {
        content: '',
        score: 5
      },
      rules: {
        content: [{
          required: true,
          message: '请输入评论内容',
          trigger: 'blur'
        }]
      },
      showCommentDialog: false
    }
  },
  methods: {
    getBook () {
      this.$http.get(`api/book/info/${this.book.bookId}`).then(({ data }) => {
        this.book = { ...data }
      })
    },
    getCatalog () {
      this.$http.get(`api/book/${this.book.bookId}/catalog`).then(({ data }) => {
        this.catalogList = [...data]
      })
    },
    getLikeStatus () {
      if (this.loginInfo.vipId) {
        this.$http.get('api/book/like/check', { userId: this.loginInfo.loginInfo.userId, bookId: this.book.bookId }).then(({ data }) => {
          this.isLike = data
        })
      } else {
        this.isLike = false
      }
    },
    like () {
      if (this.loginInfo.vipId) {
        this.$http.get('api/book/like/save', { userId: this.loginInfo.loginInfo.userId, bookId: this.book.bookId }).then(() => {
          this.$message.success('操作成功')
          this.getLikeStatus()
        })
      } else {
        this.$message.error('请先登录！')
      }
    },
    saveComment () {
      this.comment = {
        ...this.comment,
        bookId: this.book.bookId,
        userId: this.loginInfo.loginInfo.userId
      }
      this.$http.post('api/comment/save', this.comment).then(() => {
        this.$message.success('评论成功')
        this.showCommentDialog = false
        this.getBook()
        this.$refs.commentList.getCommentList()
        this.comment = {
          content: '',
          score: 5
        }
      })
    },
    read (catalogId) {
      if (catalogId) {
        this.$router.push(`read?bookId=${this.book.bookId}&catalogId=${catalogId}`)
      } else {
        this.$router.push(`read?bookId=${this.book.bookId}`)
      }
    }
  },
  created () {
    if (this.$route.query.bookId) {
      this.book.bookId = this.$route.query.bookId
      const vipInfo = sessionStorage.getItem('vipInfo')
      if (vipInfo) {
        this.loginInfo = JSON.parse(vipInfo)
      }
      this.getBook()
      this.getCatalog()
      this.getLikeStatus()
    } else {
      this.$message.error('参数错误！')
      this.$router.replace('/')
    }
  }
}
</script>

<style scoped>

</style>
